<!doctype html>
<html>
<head>
	<title>Line Chart: Style Presets</title>
	<script src="../../../codebase/webix.js" type="text/javascript"></script>
	<link rel="STYLESHEET" type="text/css" href="../../../codebase/webix.css">
	<script src="../../common/chartdata.js"></script>
<body>

    <div style="padding-left: 20px;">
        <b>Preset:</b>
        <select id="preset" onchange="applyPreset()">
            <option value="plot" selected>plot</option>
            <option value="diamond">diamond</option>
            <option value="simple">simple</option>
        </select>
    </div>
    <div id="chartDiv" style="width:600px;height:250px;margin:20px"></div>
	<script>
	    drawChart("plot");
        function drawChart(preset){
            webix.ui({
                view:"chart",
                container:"chartDiv",
                id:"chart",
                type:"line",
                value:"#sales#",
                preset: preset,
                xAxis:{
                    template:"'#year#"
                },
                yAxis:{
                    start:0,
                    end:100,
                    step:10,
                    template:function(obj){
                        return (obj%20?"":obj)
                    }
                },
                data: dataset
            });
        }
        function applyPreset(){
            var preset = document.getElementById("preset").value;
            $$("chart").destructor();
            drawChart(preset);
        }
	</script>
</body>
</html>
